<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-81-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-81-t.html">Full version</a>, <a href="basic-animate-elem-81-t.html">Basic version</a>, <a href="tiny-animate-elem-81-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="basic-animate-elem-80-t.html">animate-elem-80-t ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-animate-elem-82-t.html">→ animate-elem-82-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-81-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-81-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-81-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-81-t" src="../png/basic-animate-elem-81-t.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">

            <p>
                This test validates the operation of the animateTransform's
                additive behavior, as described in the SVG 1.1 specification
                (see
                http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement).
                </p>

            <p>
                The first two rectangles, on the top row, show the effect of the
                additive attribute on animateTransform. The left-most
                animateTransforms have their additive attribute set to replace,
                so the effect of the two transform animation is as if only the
                highest priority one applied because it replaces the underlying
                value. The second animateTransforms (from left to right) have
                their additive attribute set to sum, which means the transforms
                they produce are concatenated.  </p>

            <p>
                The last two rectangles, on the top row, show the effect of the
                accumulate attribute on animateTransform. For the left one
                (third on the row, from left to right), the accumulate attribute
                is set to none. There are two repeats for the
                animateTransform. Therefore, the transform goes twice from a
                scale(1,1) to a scale(2,2). For the right-most animateTransform,
                the accumulate attribute is set to sum. There are two repeats
                and the animation goes from scale(1,1) to scale(2,2) for the
                first iteration and then from scale(2,2) to scale(4,4) (because
                the result of the second iteration is concatenated to the
                scale(2,2) result of the previous, first iteration).
                </p>

            <p>
                The rectangles on the bottom row show the combination of
                additive and cumulative behavior. The left rectangle's
                animateTransform accumulate behavior is set to none but its
                additive behavior is set to sum. Therefore, the transform's
                underlying value (skewX(30)) is always pre-concatenated to the
                animateTransform's result, which goes from "skewX(30)
                scale(1,1)" to "skewX(30) scale(2,2)" in each of its two
                iterations.  The right rectangle's animateTransform accumulate
                behavior is set to sum and the additive behavior is also set to
                sum. Therefore, the transform's underlying value is always
                pre-concatenated, so is the result of previous animation
                iterations. Consequently, the transform goes from "skewX(30)
                scale(1,1)" to "skewX(30) scale(2,2)" for the first iteration
                and then from "skewX(30) scale(2,2) scale(1,1)" to "skewX(30)
                scale(2,2) scale(2,2)" for the second iteration.  </p>


		</div>
<div class="linkbar"> <p>
				<a href="basic-animate-elem-80-t.html">animate-elem-80-t ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-animate-elem-82-t.html">→ animate-elem-82-t</a>
						</p></div>
</body>
</html>
